<template>
    <div class="box">
        <div class="container" ref="container">
            <div class="top">
                <top></top>
            </div>
            <div class="bottom">
                <div class="bottom-left">
                    <tourist class="tourist"></tourist>
                    <sex class="sex"></sex>
                    <age class="age"></age>
                </div>
                <div class="bottom-middle"></div>
                <div class="bottom-right"></div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import top from './components/top.vue'
import tourist from './components/tourist.vue'
import sex from './components/sex.vue'
import age from './components/age.vue'
import { onMounted, ref } from 'vue';
const container = ref<any>(null)
function screenResize() {
    let ww=window.innerWidth/1920
    let wh=window.innerHeight/1080
    container.value.style.transform=`scale(${Math.min(ww,wh)}) translate(-50%,-50%)`
}
onMounted(()=>{
    screenResize()
})
window.onresize=()=>{
    screenResize()
}
</script>
<style scoped lang="less">
@import url('../../styles/datascreen/index.less');
</style>
